import React, { Component } from 'react'
// 引入connect用于连接ui 组件于redux
import {connect} from 'react-redux'
import {createIncrementAction,createDecrementAction,constcreateIncrementAsyncAction}from '../../redux/count_action'
// UI组件不需要导出
class Count extends Component {

    increment=()=>{
       const {value}=this.selectNum
       this.props.jia(value*1)
    }
    decrement=()=>{
        // 利用ref拿到select中的值
        const {value}=this.selectNum
        this.props.jian(value*1)
    }
    incrementIfOdd=()=>{
        // 利用ref拿到select中的值
        const {value}=this.selectNum
        if(this.props.count % 2 !==0){
            this.props.jia(value*1)
        }
    }
    incrementasync=()=>{
        // 利用ref拿到select中的值
        const {value}=this.selectNum
        this.props.jiaAsync(value*1,500)
    }
    render() {
        console.log('接收到的UI组件的值为：',this.props.count)
        return (
            <div>
                <h1>当前求和：{this.props.count}</h1>
                <select ref={c=>this.selectNum=c}>
                    <option value="1"> 1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                &nbsp;
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementIfOdd}>当前数为积数再加</button>
                <button onClick={this.incrementasync}>异步再加</button>
            </div>
        )
    }
}
// 函数的返回值对象作为状态传递给了ui组件,就是对象中的key 作为传递给UI的props 的key，，，value值就是作为UI组件的props的value------状态
function  mapStateToProps(state){
    return {count:state}
}
// 状态方法
function  mapDispatchToProps(dispatch){
    return {jia:(data)=>{
        // console.log(data)
        // 通知redux相加或者相减操作
        dispatch(createIncrementAction(data))
    },
    jian:(data)=>{
        dispatch(createDecrementAction(data))
    },
    jiaAsync:(data,time)=>{
        dispatch(constcreateIncrementAsyncAction(data,time))
    }
}
}
// 使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(Count)

